<template>
  <x-layout bg-color="#fff">
    <template #scroll>
      <div class="flex gap-20rpx w-100% p-20rpx flex-col">
        <u-cell-group :border="false">
          <u-cell
            title="出生日期(到时)"
            :is-link="true"
            :value="caleDate"
            arrow-direction="right"
            @click="openSelect"
          />
        </u-cell-group>
        <div class="flex flex-col gap-20rpx" v-if="scbz">
          <div>
            农历：{{ lunar.str }} {{ sc+'时' }}
          </div>
          <div>八字：{{ scbz.bz }}</div>
          <div>五行：{{ scbz.wx }}</div>
          <div>方位：{{ scbz.fw }}</div>
          <div>十神：{{ scbz.shishen }}</div>
        </div>
      </div>
      <u-datetime-picker
        @cancel="cancelSelect"
        @confirm="confimHandle"
        :show="show"
        v-model="curDate"
        mode="datetime"
        :min-date="minDate"
      />
    </template>
  </x-layout>
</template>

<script setup>
import dayjs from 'dayjs'
import { computed, ref } from 'vue'
import Bazi from './bazi'
import Lunar from './Lunar'

const show = ref(false)
const curDate = ref('')
const lunar = ref('')
const sc = ref('')
const caleDate = computed(() => {
  let str = ''
  if (curDate.value) {
    str = dayjs(curDate.value).format('YYYY年MM月DD日 HH时')
  }
  return str
})
const minDate = dayjs('1980-01-01').valueOf()

const scbz = ref('')

const openSelect = () => {
  show.value = true
}
const cancelSelect = () => {
  show.value = false
}
const confimHandle = (e) => {
  curDate.value = dayjs(e.value)
  show.value = false
  const date = new Date(e.value)
  const year = date.getFullYear()
  const month = date.getMonth()
  let day = date.getDate()
  let hour = date.getHours()
  if (hour >= 23) {
    day += 1
    hour = 0
  }
  const timeP = new Date(year, month, day, hour)
  lunar.value = Lunar.calc(timeP)
  sc.value = Bazi.cHour(hour)
  scbz.value = Bazi.calc(timeP)
}

</script>

<style lang="scss" scoped>

</style>
